<template>
  <!-- 头像组件 -->
  <el-dropdown trigger="click">
    <div class="pic">
      <img :src="imgs" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="users">
          <span class="iconfont icon-geren tubiao"></span>个人信息
        </el-dropdown-item>
        <el-dropdown-item @click="amend">
          <span class="iconfont icon-mima tubiao"></span>密码修改
        </el-dropdown-item>
        <el-button type="text" @click="open">
          <el-dropdown-item>
            <span class="iconfont icon-youjiantou tubiao"></span>退出登录
          </el-dropdown-item>
        </el-button>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { mapActions } from 'vuex' // 引入mapActions
import { post } from '@/utils/http.js' // 引入封装工具

export default {
  data () {
    return {
      imgs: '' // 头像
    }
  },

  created () {
    this.indexs()
  },

  methods: {
    // 个人信息
    users () {
      this.$router.push('/User')
    },
    ...mapActions(['add', 'outs']),

    // 个人数据
    indexs () {
      const data = {
        _gp: 'admin', // 请求参数
        _mt: 'info' // 请求参数
      }
      // this.axios.post("http://192.168.1.188:8080/m.api", data, {
      //   headers: {
      //     AdminToken: Cookies.get("token"),
      //   },
      // });
      post(data).then((res) => {
        if (res.data.data.avatarUrl == undefined) {
          this.imgs =
            'https://img1.baidu.com/it/u=726343048,1874880529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
        } else {
          this.imgs = res.data.data.avatarUrl // 头像
        }
        const adds = res.data.data // 传值给Vuex
        // this.$store.dispatch("add", adds);
        this.add(adds)
      })
    },

    // 修改跳路由
    amend () {
      this.$router.push('/Code')
    },

    // 退出登录
    open () {
      ElMessageBox.confirm('确认退出?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 退出接口
          this.outs()
          // 退出提示
          ElMessage({
            type: 'success',
            message: '退出成功！'
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作！'
          })
        })
    }
  }
  // 方法结束
}
</script>

<style lang="less" scoped>
// 头像
.tou {
  margin-left: 5px;
  .pic /deep/ img {
    width: 50px;
    height: 50px;
    border-radius: 45px;
  }
}
</style>
